<template>
  <div id="app">
    <div class="header">

      <div class="back-btn" @click="goBack">
        <!--        <van-icon @click="arrowleft" name="arrow-left" style="margin-left: 20px;margin-top: 20px;margin-right: 250px" size="30px" />-->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
             class="feather feather-arrow-left">
          <line x1="19" y1="12" x2="5" y2="12"></line>
          <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
      </div>

      <h2>附近可用的车</h2>
      <div class="menu-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
             class="feather feather-menu">
          <line x1="3" y1="12" x2="21" y2="12"></line>
          <line x1="3" y1="6" x2="21" y2="6"></line>
          <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
      </div>
    </div>
    <div class="map-container">
      <div ref="map" style="width: 100%; height: 400px;"></div>
    </div>
    <div class="car-details-card" @click="carRental" v-if="selectedCar">
      <div class="car-image">
        <img :src="selectedCar.icon" alt="车辆" width="100" style="margin-top: 50px">
      </div>
      <div class="car-infol">
        <h3>{{ selectedCar.model }}</h3>
        <p><van-icon name="sign" /> {{ selectedCar.fuelLevel }}%油量</p>
        <p><van-icon name="location-o" /> {{ selectedCar.location }}</p>
        <p><b>￥{{ selectedCar.price }}/小时</b></p>
        <div class="rating">
          <van-icon name="star" color="orange" />
          <span class="rating-value">{{ selectedCar.rating }}</span>
          <span class="rating-count">({{ selectedCar.reviews }} k的评论)</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

export default {
  data() {
    return {
      map: null,
      cars:{},
      markers: [
        {
          position: [40.137609, 116.20],
        },
        {
          position: [40.137609, 116.2088],

        },
        {position: [40.13, 116.204888],}
      ],
      userPosition: [40.137609, 116.204888],
      userIcon: '',
      selectedCar: null
    }
  },
  mounted() {
    this.initMap()
  },


  methods: {
    goBack(){
      this.$router.back()
    },
    carRental(){
      this.$router.push({ name: 'carRental'})
    },
    initMap() {
      this.map = L.map(this.$refs.map).setView(this.userPosition, 13)
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(this.map);

      // 添加用户位置标记
      let userIconUrl = this.userIcon || 'http://sq4f6kqu8.hn-bkt.clouddn.com/user.png?e=1737199559&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:rdxmsrPqJ8qKSFSJPXzKzlaczsM='; // 添加默认用户图标 URL
      L.marker(this.userPosition, {
        icon: L.icon({
          iconUrl: userIconUrl,
          iconSize: [40, 40],
          iconAnchor: [20, 20]
        })
      }).addTo(this.map)

      // 添加车辆标记
      this.markers.forEach(marker => {
        let carIconUrl = marker.icon || '\n' +
            'http://sq4f6kqu8.hn-bkt.clouddn.com/car.png?e=1737199545&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:sEREQPqYDhW-K8FXNAh7chT706c='; // 添加默认车辆图标 URL
        const carMarker = L.marker(marker.position, {
          icon: L.icon({
            iconUrl: carIconUrl,
            iconSize: [50, 50],
            iconAnchor: [25, 25]
          })
        }).addTo(this.map)
        carMarker.bindPopup(`<div class="car-infof"><span class="available-count">${marker.availableCount}辆可用</span></div>`)
        carMarker.on('click', () => {
          this.selectedCar = marker
        })
      })
    },
    carAll() {
      this.cars = JSON.parse(localStorage.getItem("cars")); // 检查 cars 是否为 null 并添加默认值
      this.user = JSON.parse(localStorage.getItem("currentUser"));
      this.userIcon = this.user?.imageUrl || '';
      console.log(this.cars)
      for (let i = 0; i < this.markers.length && i < 3; i++) {
        if (this.cars && this.cars.imageUrl && this.cars.imageUrl[0]) {
          this.markers[i].icon = this.cars.imageUrl[0];
        }
        this.markers[i].availableCount = 10;
        if (this.cars && this.cars.carModel) {
          this.markers[i].model = this.cars.carModel;
        }
        if (typeof this.cars?.fuelLevel === 'number') {
          this.markers[i].fuelLevel = this.cars.fuelLevel;
        }
        if (this.cars && this.cars.locationPoint) {
          this.markers[i].location = this.cars.locationPoint;
        }
        if (typeof this.cars?.pricePerHour === 'number') {
          this.markers[i].price = this.cars.pricePerHour;
        }
        if (typeof this.cars?.rating === 'number') {
          this.markers[i].rating = this.cars.rating;
        }
        if (typeof this.cars?.numReviews === 'number') {
          this.markers[i].reviews = this.cars.numReviews;
        }
      }
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    if (this.user == null) {
      this.$message.error("请先登录")
      setTimeout(
          () => {
            this.$router.push({ name: 'login' });
          },
          1000
      )
    }
    this.carAll()
  }
}
</script>

<style>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.back-btn,
.menu-btn {
  cursor: pointer;
}

.map-container {
  //flex: 1;
  //position: relative;
  overflow: hidden;
  height: 500px;
}

.car-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.car-infof {
  background-color: #ffffff;
  color: black;
  //padding: 5px 10px;
  border-radius: 5px;
  margin-top: 20px;
}

.car-infol {
  width: 500px;
  margin-top: 10px;
  margin-left: 10px;
}

.user-marker {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.car-details-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 80%;
  margin-left: 7%;
  //position: fixed;
}

.car-image {
  margin-right: 10px;
  background-color: #f7f7f7;
}

.car-info p {
  margin: 5px 0;
}

.icon-fuel:before {
  content: '\f272';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}

.icon-location:before {
  content: '\f3c5';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}

.icon-price:before {
  content: '\f155';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
}

.icon-star:before {
  content: '\f005';
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
  color: gold;
}

.rating-value {
  margin-right: 5px;
}
</style>